<template>
	<div class="main">
		<el-main style="border: 1px solid black; padding: 0">
			<el-row style="box-shadow: 0 0 3px 2px black; margin: 5px 0; padding: 5px 5px">
				<Tag
					:tag-list="getTagList"
					@handler-close="handlerTagClose"
					@handler-click="handlerTagClick"
				></Tag>
			</el-row>

			<el-row
				style="
					padding: 10px;
					height: calc(100vh - 105px);
					width: calc(100vw - 205px);
					overflow: auto;
				"
				class="slid-block"
			>
				<router-view />
			</el-row>
		</el-main>
	</div>
</template>

<script>
import Tag from "@/components/main/Tag.vue"
import { TagCurMenu } from "@/utils/index.js"

export default {
	name: "FrontAdminMain",
	components: {
		Tag,
	},
	data() {
		return {}
	},
	computed: {
		getTagList() {
			return this.$store.state.tagList
		},
	},
	mounted() {},

	methods: {
		handlerTagClose(tag) {
			this.deleteTagAndUpdateCurMenu(this, tag)
		},
		handlerTagClick(tag) {
			this.$router.push({ path: tag.path })
			let curMenuList = this.handlerObjConvertAry(tag)
			this.$store.commit("updateCurMenuList", curMenuList)
		},
		handlerObjConvertAry: TagCurMenu.handlerObjConvertAry,
		deleteTagAndUpdateCurMenu: TagCurMenu.deleteTagAndUpdateCurMenu,
	},
}
</script>

<style lang="scss" scoped></style>
